<template>
    <!-- 跟随父级宽高 -->
    <div :id="id" class="w-full h-full"></div>
</template>

<script lang="ts" setup>
import request from '@/Utils/request';
import { createEnglishUuid, loadAliVedioJs } from '@/Utils/utils';
import { ElMessage } from 'element-plus';
import { nextTick, onDeactivated, ref, watch } from 'vue';

const emit = defineEmits(['getVedio']);

const props = defineProps<{
    id?: string | number; // 视频id
    ossVideoid?: string;
    width?: string;
    height?: string;
    autoplay?: boolean;
    learn?: boolean;
}>();

const id = ref(createEnglishUuid());

let player: any;

// 播放视频
const playVedio = async () => {
    try {
        let ossVideoid = props.ossVideoid || '';
        if (!ossVideoid) {
            const dataRes = await request({
                url: '/lms/res-video/adminGetById',
                data: {
                    id: props.id
                },
                contentTypeIsForm: true
            });
            if (!dataRes || !dataRes.ossVideoid) {
                return ElMessage({
                    message: '获取视频信息失败',
                    type: 'warning'
                });
            }
            ossVideoid = dataRes.ossVideoid;
            emit('getVedio', dataRes);
        }
        let adminGetPlayAuthData = '';
        if (props.learn && props.id) {
            adminGetPlayAuthData = await request({
                url: '/lms/user-certification/adminGetByResId',
                data: {
                    resId: props.id,
                    resType: 1
                },
                contentTypeIsForm: true
            });
        } else {
            // 获取播放凭证
            adminGetPlayAuthData = await request({
                url: '/lms/res-video/adminGetPlayAuth',
                data: {
                    ossVideoid
                },
                contentTypeIsForm: true
            });
        }
        
        if (!adminGetPlayAuthData || typeof adminGetPlayAuthData != 'string') {
            return ElMessage({
                message: '获取播放凭证失败',
                type: 'warning'
            });
        }
        if (player) {
            await new Promise(resolve => setTimeout(resolve, 300));
            player.replayByVidAndPlayAuth(ossVideoid, adminGetPlayAuthData);
            return;
        }
        if (!await loadAliVedioJs()) {
            return ElMessage({
                message: '加载视频组件失败',
                type: 'warning'
            });
        }
        await nextTick();
        player = new Aliplayer({
            "id": id.value,
            "vid": ossVideoid,
            "playauth": adminGetPlayAuthData,
            "qualitySort": "asc",
            "format": "m3u8",
            "mediaType": "video",
            "encryptType": 1,
            "width": props.width,
            "height": props.height,
            "autoplay": props.autoplay || false,
            "isLive": false,
            "rePlay": false,
            "playsinline": true,
            "preload": true,
            "controlBarVisibility": "hover",
            "useH5Prism": true
        });
    } catch (error) {
        console.warn('error: ', error);
    }
};

watch(
    () => props.id,
    () => {
        // console.log(props.id);
        if (props.id && props.id > 0) {
            playVedio();
        }
    },
    {
        immediate: true
    }
);

onDeactivated(() => {
    player && player.pause();
});

defineExpose({
    dispose: () => {
        if(player) {
            player.dispose();
            player = null;
        }
    },
    pause: () => {
        player && player.pause();
    }
});
</script>

<style lang="scss" scoped>

</style>